<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>{$praiseContent['title']}</title>
<link href="/Public/css/maint.css" type="text/css" rel="stylesheet" />
<link href="/Public/css/font.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/common.js?v=12"></script>
<script type="text/javascript" src="/Public/js/page.js?v=17"></script>
<script type="text/javascript" src="/Public/js/main.js?v=1"></script>
<script type="text/javascript" src="/Public/js/verify.js?v=1"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="/Public/js/html2canvas.min.js"></script>
<script type="text/javascript" src="/Public/js/canvas2image.js"></script>
<style>
    .pSkillBar > div{
        float: left;
    }
    .cur-vote{
        position: relative;
    }
    .cur-vote .num{
        float: left;
    }
    .num.none{
        display: none;
    }

    .cur-vote .num-effect{
        float: none;
        position: absolute;
        top:0;
        right:0;
        /*width: 10px;*/
        height: 100%;
        /*background-color: rgba(32,255,192,.3);*/
    }
    .cur-vote .num-effect .effect-num{
        position: absolute;
        color: #ff0000;
        top:0;
        right:0;
    }
    .weixinAlert.borderRadius.erweima{
        height: auto;
    }

    .weixinAlert.borderRadius.erweima p.pVote{
        height: auto;
        padding: auto;
        padding-left: 10px;
    }

    .weixinAlert.borderRadius.erweima div.voteSure{
        margin: 10px auto;
    }

</style>

</head>	
<body style="background-color:#eee">
<div class="mask"></div>
<div style="position:fixed;margin:auto;z-index:9999;background-color: white;width: 205px;height: 82px;display:none;left:0;right:0;top:0;bottom:0;" id="check">
    <div id="v_container" style="width: 200px;height: 50px;"></div>
    <input type="text" id="code_input" value="" placeholder="请输入验证码" style="width: 150px;height: 30px;margin:0;padding:0;"/><button id="my_button" style="margin:0;padding:0;width: 50px;height:30px;float: right">验证</button>
</div>
<div class="share"></div>
<div class="ewms borderRadius">
	<span class="icon iconfont icon-chahao closeEwm"></span>
	<h1 class="h1ewms">二维码拉人气</h1>
    <div class="divewmImg"><img src="{$wxuser['headerpic']}" width="100%"></div>
	<p class="pewm">微信扫描此二维码，让大家为</p>
    <p class="pewm"><span class="bold font16">{$result['show_name']}</span>添人气</p>
</div>
<!--<img src="/Public/images/praise_share.png" style="position: fixed;top:75%;right:6%;width: 18%;z-index: 10;" id="share_btn" onclick="convert2canvas();">-->
<div style="background-color: rgba(0,0,0,0.8);z-index: 13;width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none" id="mask"></div>
<canvas style="display: none" id="myCanvas"></canvas>
<img src="/Wap/Praise/code?praise={$praise}&id={$id}" style="display: none" id="qrcode">
<img src="/Public/images/save.png" id="corner_img" style="display: none">
<img src="/Public/images/wxtitle.jpg" id="wxtitle_img" style="display: none">
<img src="" style="display: none;position: fixed;left: 15%;top: 8%;z-index: 15;width: 70%;" id="result">
<img id="cancle_img" src="/Public/images/cancle.png" style="position: fixed;z-index: 15;width: 7%;left: 5%;top: 8%;display: none" onclick="cancle_img()">
<div id="main">
	<div class="contBox1">
        <div class="contentTitle" style="margin-bottom:0px;"><a href="/Wap/Praise/index?praise={$praise}" target="_self"><span class="icon iconfont icon-fanhui backBtn"></span></a><p>{$result['grade']}号：{$result['show_name']}</p></div>
        <?php if($type === 'video'){?>
        <video class="contentImg" src="<?php echo $result['external_link'];?>" controls="controls" poster="<?php echo $result['pic'];?>"></video>
        <?php }
        ?>
        <img src="<?php echo $result['pic'];?>"  class="contentImg">
    <div class="stateForm">
    <div class="weixinAlert borderRadius" id="voteSuccess">
    	<p class="pVote">添人气成功！您今天还剩余5次</p>
        <div class="voteSure borderRadius">确定</div>
    </div>
    <div class="weixinAlert borderRadius" id="voteResourceOut">
    	<p class="pVote">今日机会已用完，明天再来吧！</p>
        <div class="voteSure borderRadius">确定</div>
    </div>
    <div class="weixinAlert borderRadius" id="voteError">
    	<p class="pVote">添人气失败！</p>
        <div class="voteSure borderRadius">确定</div>
    </div>
    </div>
    <div class="divConBtn bot10">
        <div class="divPadding"><span class="zpName">{$result['show_name']}</span></div>
        <if condition="!empty( $result['teacher_name'] )" >
        <span class="zpinfo boxSize">
                <span class="zpTeacher" style="width: 100%">指导教师：{$result['teacher_name']}</span>
           </span>
        </if>
        <span class="zpinfo boxSize">
			<span class="zpNum">编号：{$result['grade']}</span>
			<span class="zpRank">排名：<em>{$rank['index']}</em></span>
        </span>
        <div class="divskillBar boxSize">
			<div class="skillbar clearfix borderRadius" data-percent="{$rank['percent']}">
                <div class="skillbar-bar borderRadius">
                    <img id="plus-one" style=" float: right; margin-top: -36px; ">
                </div>
        	</div>
            <div class="pSkillBar" style="position: relative;">
                <div>当前人气值：</div>
                <div class="cur-vote">
                    <div class="num-effect">
                        <div class="effect-num effect-out"></div>
                        <div class="effect-num effect-in"></div>
                    </div>
                    <div class="org-vote">{$result['votes']}</div>
                </div>
                <div style="margin-left: 10px">距前一名还相差：</div>
                <div class="gap-vote">{$rank['gap']}</div>
            </div>

        </div>
        <if condition="$checked eq 1">
            <div class="votebtn borderRadius" data-item="{$result['id']}" data-praise="{$result['praise_id']}" data-openid="{$openid}" data-unionid="{$unionid}">
                给TA添人气
            </div>
        <else />
            <div class="votebtn graybtn borderRadius" data-item="{$result['id']}" data-praise="{$result['praise_id']}" data-unionid="{$unionid}">给TA添人气</div>
        </if>
        <div style="margin: -10px 0 10px 0; text-align: center;color: #2bbee0; font-weight: 600;"> 
            <span id="vote-tips"></span> 
        </div>
    </div>
    </div>
    <if condition="!empty($result['contract'])">
     <div class="divContent bot10">
    	<span class="spanIntro">简介</span>
    	<p class="pIntro">{$result['contract']}</p>
    </div>
    </if>
    <if condition="( !empty($result['author_contract']) ) OR (!empty($result['author_pic']))" >
    <div class="divContent bot10">
    	<span class="spanIntro">作者风采</span>
    	<p class="pIntro boxSize">
            <if condition="!empty($result['author_pic'])" >
                <img src="{$result['author_pic']}" width="100%">
            </if>
            <if condition="!empty($result['author_contract'])">
                <p class="pIntro">{$result['author_contract']}</p>
            </if>
        </p>
    </div>
    </if>
    <if condition="(!empty($result['teacher_contract'])) OR (!empty($result['teacher_pic']))">
     <div class="divContent bot10">
    	<span class="spanIntro">教师风采</span>
    	<p class="pIntro boxSize">
            <if condition="!empty( $result['teacher_pic'] )">
                <img src="{$result['teacher_img']}" width="100%">
            </if>
            <if condition="!empty($result['teacher_contract'])">
                {$result['teacher_contract']}
            </if>
        </p>
    </div>
    </if>
    <if condition="( !empty($result['school_contract']) ) OR ( !empty($result['school_pic']) )">
     <div class="divContent bot10">
    	<span class="spanIntro">学校介绍</span>
    	<p class="pIntro boxSize">
            <if condition="!empty($result['school_pic'])">
                <img src="{$result['school_pic']}" width="100%">
            </if>
            <if condition="!empty($result['school_contract'])" >
                {$result['school_contract']}
            </if>
        </p>
    </div>
    </if>
</div>
<include file="Tpl/footer" praise="{$praise}"/>

<script type="text/javascript">	
page.praise.init( { followLink: "{$followLink}", openid: "{$openid}" } );
var verifyCode = new GVerify("v_container");
</script>
<script type="text/javascript">
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '{$wxuser["appid"]}', // 必填，公众号的唯一标识
            timestamp: "{$timestamp}", // 必填，生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
            signature: '{$wxSha1}',// 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.error(function(res){
            //console.log(res);
    		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
        wx.ready( function( e ){
            wx.onMenuShareAppMessage({
                title: "快来帮" + "{$result['show_name']}" + "投票吧", // 分享标题
                desc: "{$share_desc}", // 分享描述
                link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praise&a=fetch_one&praise={$praise}&id={$result['id']}", // 分享链接
                imgUrl: "{$share_pic}", // 分享图标

                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareTimeline({
                title: "快来帮" + "{$result['show_name']}" + "投票吧", // 分享标题
                desc: "{$share_desc}",
                link: location.protocol + "//" + window.location.hostname + "/index.php?m=wap&c=praise&a=fetch_one&praise={$praise}&id={$result['id']}", // 分享链接
                imgUrl: "{$share_pic}", // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        })
		   

</script>

<script type="text/javascript">
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if (isWeixin) {
        document.addEventListener("WeixinJSBridgeReady",function(){
            vote()
        });
    }else{
        $(function(){
            vote();
        });
    }

    function vote(){
        var orgVote = $(".cur-vote .org-vote");
        var num = orgVote.html();
        orgVote.remove();
        makeNumber($(".cur-vote") ,num);

        $(".effect-num").hide();

        var _followLink = undefined;

        function makeNumber(el, num) {
            var $el = $(el);
            var numArr = (num+"").split("");
            var len = numArr.length;
            for(var i=10-len-1; i>=0; i--){
                $el.append("<div class='num none n-"+i+len+"'>"+0+"</div>");
            }
            for(var i=0; i<len; i++){
                $el.append("<div class='num n-"+i+"'>"+numArr[i]+"</div>");
            }
        }

        function addNumEffect(el) {
            var $nums = $(el).children(".num");
            var $lastChar = $nums.last();

            var preVal = +$lastChar.html();
            var nextVal = (preVal + 1) % 10;

            var $out = $(".effect-num.effect-out");
            var $in = $(".effect-num.effect-in");

            $out.html(preVal);
            $in.html(nextVal);

            $out.show();$in.show();
            $out.css({top:0,opacity:1}).animate({top:20,opacity:0},500,"swing",function(){$(this).hide()});
            $in.css({top:-20,opacity:0}).animate({top:0,opacity:1},500,"swing",function(){$(this).hide()});

            $lastChar.css("visibility","hidden");
            setTimeout(function () {
                $lastChar.css("visibility","visible");
            },500);

            var idx = -1;
            while(true){
                var $v = $nums.eq(idx);
                if($.isEmptyObject($v)) break;
                var v = +$v.html();
                if(v < 9){
                    $v.html(v+1);
                    if($v.hasClass("none")){
                        $v.removeClass("none");
                    }
                    break;
                }
                $v.html(0);
                idx--;
                if(idx < -10) break;
            }
        }

        function updateAnimPlusOne(ex){
            var plusOne = $( "#plus-one");
            plusOne.attr("src","/Public/images/plus_one.gif"+"?v=" + new Date().getTime());

            addNumEffect($(".cur-vote"));

            var gapVote = $(".cur-vote .gap-vote");
            var gapVal = +gapVote.html();
            gapVote.html(gapVal+1);
            if(ex == 0 || true){
            <?php if($result['click'] == 1){
                    echo 'setTimeout(function () {';
                    echo 'window.location.href = "' . $result['yuliu'] . '"';
                    echo '},500)';
                }?>
            }
        }

        window.updateAnimPlusOne = updateAnimPlusOne;
    }
    var result_img = false
    function convert2canvas() {
        $("#share_btn").css("display", "none");
        if(result_img == false){
            var shareContent = $("body")[0];
            var width = shareContent.offsetWidth;
            var height = shareContent.offsetHeight;
            var canvas = document.createElement("canvas");
            canvas.width = width;
            canvas.height = height;

            var opts = {
                canvas: canvas,
                logging: true,
                width: width,
                height: height
            };
            html2canvas(shareContent, opts).then(function (canvas) {
                var context = canvas.getContext('2d');

                var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

                document.body.appendChild(img);
                $(img).css({
                    "width": canvas.width + "px",
                    "height": canvas.height + "px",
                    "position": "fixed",
                    "top": 0,
                    "left": 0,
                    "display": "none"
                });
                img.onload = function(){
                    var myCanvas = document.getElementById('myCanvas');
                    myCanvas.width = width * 0.7;
                    myCanvas.height = window.screen.availHeight * 0.75;
                    $("#myCanvas").css({
                        "position": "fixed",
                        "left": "15%",
                        "top": "8%",
                        "display": "none",
                        "z-index": 15
                    });
                    var ctx = myCanvas.getContext("2d");
                    //--绘制白底--
                    ctx.fillStyle="#FFFFFF";
                    ctx.fillRect(0, 0, width*0.7, window.screen.availHeight * 0.75);

                    //--绘制头部--
                    ctx.shadowBlur=10;
                    ctx.shadowColor="rgba(0,0,0,0.7)";
                    var img_title = document.getElementById("wxtitle_img");
                    ctx.drawImage(img_title, 0, 0, 469, 47, width * 0.05, width * 0.05, width * 0.602, width * 0.0693);

                    //--绘制标题--
                    ctx.shadowBlur=0;
                    ctx.font="12px consolas";
                    ctx.fillStyle = "black";
                    ctx.fillText("识 别 二 维 码 参 与 投 票", width * 0.18, width * 0.05 + 16, width * 0.34);


                    //--绘制截图--
                    ctx.shadowBlur=10;
                    ctx.shadowOffsetY=2;
                    ctx.shadowColor="rgba(0,0,0,0.7)";
                    ctx.drawImage(img, 0, 0, width, width * 1.4, width * 0.05, width * 0.1193, width * 0.602, width * 0.8428);

                    //---绘制二维码--

                    ctx.shadowBlur=0;
                    ctx.shadowOffsetY=0;
                    var img_qrcode = document.getElementById("qrcode");
                    ctx.drawImage(img_qrcode, 0, 0, 148, 148, width * 0.245, width * 0.9621 + 10, width * 0.21, width * 0.21);

                    //--绘制文字--
                    ctx.font="12px consolas";
                    ctx.fillStyle = "black";
                    ctx.fillText("识 别 二 维 码 参 与 投 票", width * 0.18, width * 1.1721 + 25, width * 0.34);

                    //--绘制角落--
                    var img_corner = document.getElementById("corner_img");
                    ctx.drawImage(img_corner, 0, 0, 89, 89, width * 0.56 + 4, window.screen.availHeight * 0.75 - width * 0.14 + 4, width * 0.14, width * 0.14);

                    document.getElementById("result").src = myCanvas.toDataURL();
                    result_img = true;
                    $("#result").css("display", "block");
                    $("#mask").css("display", "block");
                    $("#cancle_img").css("display", "block");
                }
            });
        }else{
            $("#result").css("display", "block");
            $("#mask").css("display", "block");
            $("#cancle_img").css("display", "block");
        }
    }
    $("#mask").click(function(){
        cancle_img();
    });
    function cancle_img(){
        $("#result").css("display", "none");
        $("#cancle_img").css("display", "none");
        $("#mask").css("display", "none");
        $("#share_btn").css("display", "block");
    }
</script>
</body>
</html>
